<template>
  <div class="avatar" :style="{ cursor: preview && src ? 'pointer' : 'default' }" @click.stop="onClick">
    <div :style="imgStyles"></div>
  </div>
</template>

<script>
import { viewImages } from './viewer.js';
import { encryptRoute } from '../encrypt-route/index.js';

import icon_people from './assets/nor_pic_head.png';
import icon_other from './assets/nor_pic_image.png';
import { useUserInfoStore } from '@gis/lib/pinia/userInfo.js';

const defaultImg = {
  people: icon_people,
  other: icon_other,
};

export default {
  name: 'avatar',
  props: {
    src: { default: undefined },
    /* 高宽比 */
    rate: { type: Number, default: 4 / 3 },
    preview: { type: Boolean, default: true },
    defaultImgType: { type: String, default: 'people' },
    encryptConfirmed: { type: Boolean, default: true }, //照片模糊，是否需要验证
  },
  computed: {
    // 根据账号配置
    encrypt() {
      const { avatarEncrypted } = useUserInfoStore();
      return avatarEncrypted == 0 ? false : true;
    },
    imgStyles() {
      const url = this.src || defaultImg[this.defaultImgType] || defaultImg.people;
      return {
        padding: `0 0 ${this.rate * 100}%`,
        background: `url(${url}) center center /cover no-repeat`,
        backgroundSize: 'cover',
        width: '100%',
        height: 0,
        '-webkit-filter': `blur(${this.encrypt && this.src ? '3px' : '0px'})`,
        filter: `blur(${this.encrypt && this.src ? '3px' : '0px'})`,
      };
    },
  },
  methods: {
    async onClick() {
      if (this.preview) {
        if (!this.src) return false;
        if (this.encrypt) {
          const res = await encryptRoute();
          if (res) {
            viewImages(this.src);
          }
        } else {
          viewImages(this.src);
        }
      }
    },
  },
};
</script>

<style lang="less"></style>
